<template>
    <view class="content">
        <tab ref="tab" @tabChange="tabChange" :list="tabList"></tab>

        <view class="record-list">
            <view class="record-item" v-for="item in tabList[active].list" @tap="toDrawDetail(item)" :key="item.id">
                <view class="img-box">
					<image class="image" :src="item.pic.split(',')[0]"></image>
				</view>
				<view class="right">
					<view class="draw-name">{{ item.name }}x{{ item.num }}</view>
					<view class="draw-type" v-if="item.type === 1">满{{ item.userCount }}人 自动开奖</view>
					<view class="draw-type" v-if="item.type === 2">{{ item.endTime }} 自动开奖</view>
				</view>
				<view class="btn-group" v-if="active === 1">
					<view class="btn" @tap.stop="toReward(item)" :class="[{ disabled : item.rewardStatus === 1}, { wait : item.rewardStatus === 0 }]">{{ item.rewardStatus === 0 ? '兑奖' : '已兑奖' }}</view>
				</view>
            </view>
        </view>
        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty" emptyText="您没有进行中的抽奖活动~" emptyType="draw"></empty>
			<view class="join-draw" v-if="tabList[active].empty" @tap="toDrawList">参与抽奖</view>
        </view>
    </view>
</template>

<script>
    import Tab from '@/components/Tab';
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';

    export default {
        name: 'record',
        mixins: [loader],
        components: {
            Tab,
            LoadMore,
            Empty,
            Skeleton
        },
        onLoad() {
            this.initPage();

            uni.reportAnalytics('enter_wode_quanbucj', {
                enter_wode_quanbucj: 1
            });
        },
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });

                this.tabList[0].label = '待开奖';
                this.tabList[0].type = 1;

                let tabList = [{ label: '中奖', type: 3 }, { label: '已结束', type: 2 }];

                tabList.forEach(item => {
                    item.loading = false;
                    item.finished = false;
                    item.error = false;
                    item.empty = false;
                    item.page = 1;
                    item.list = [];
                });

                this.tabList = this.tabList.concat(tabList);

                this.loadMore(this.tabList[0]);
            },
            beforeLoader(item) {
                this.params.status = item.type;
                this.service = this.$service.activity.lotteryActivityUser.page(this.params);
                return true;
            },
			toDrawDetail(item) {
				uni.navigateTo({
					url: '/pages/draw/detail?id=' + item.activityId
				});
			},
			toReward(item) {
				if (item.expire === 1) {
					uni.showToast({
						title: '您超过72小时未兑奖，视为自动放弃奖品',
						icon: 'none'
					});
					return false;
				}
				uni.navigateTo({
					url: '/pages/draw/reward?id=' + item.activityId
				});

                uni.reportAnalytics('click_duijiang', {
                    click_duijiang: 1
                });
			},
			toDrawList() {
				uni.navigateTo({
					url: '/pages/draw/list'
				});
			}
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        .record-list {
            padding: 0 20rpx;
            .record-item {
                padding: 20rpx;
				background: #fff;
				margin-top: 20rpx;
				border-radius: 8rpx;
				@include flexBox(space-between, center);
                .img-box {
					width: 120rpx;
					height: 120rpx;
					.image {
						width: 100%;
						height: 100%;
					}
				}
				.right {
					flex: 1;
					overflow: auto;
					margin-left: 32rpx;
					.draw-name {
						color: #333;
						font-size: 28rpx;
						font-weight: 600;
					}
					.draw-type {
						color: #7A7A7A;
						font-size: 24rpx;
						margin-top: 6rpx;
					}
				}
				.btn-group {
					width: 120rpx;
					text-align: center;
					color: #4BA1FE;
					font-size: 28rpx;
					.disabled {
						color: #333333;
					}
					.wait {
						background: #4BA1FE;
						color: #fff;
						width: 110rpx;
						line-height: 54rpx;
						border-radius: 8rpx;
					}
				}
            }
        }
		.join-draw {
			background: #439DFF;
			color: #fff;
			font-size: 28rpx;
			width: 196rpx;
			line-height: 70rpx;
			border-radius: 12rpx;
			margin: 0 auto;
			text-align: center;
		}
    }
</style>
